<template>
  <div>
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      v-loading="loading"
      element-loading-text="数据加载中"
      border
      :data="tableData.data || tableData.list"
      @current-change="tableCurrentChange"

    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        header-align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.type === 'date' ? 160 : item.width"
        :fixed="item.fixed"
        :align="item.align"
        :formatter="item.formatter"
        header-align="center"
        show-overflow-tooltip
      >
        <template v-if="item.type === 'date'" v-slot="scope">{{
          scope.row[item.prop]
        }}</template>
        <template v-else-if="item.render" v-slot="scope">
          <Expand
            :key="index"
            :row="scope.row"
            :render="item.render"
            :index="index"
          ></Expand>
        </template>
        <template v-else-if="item.type === 'operate'" v-slot="scope">
          <el-button
            type="text"
            size="medium"
            v-for="(btn, index) in item.button"
            :key="index"
            @click="handleOperateClick(scope.row, btn)"
            :icon="btn.icon"
            >{{ btn.name }}</el-button
          >
        </template>

        <!-- <template v-else v-slot="scope">
          <span class="ellipsis" :title="scope.row[item.prop]">{{
            scope.row[item.prop]
          }}</span>
        </template> -->
      </el-table-column>
    </el-table>
    <div class="pag" v-if="tableData.total">
      <el-pagination
        v-if="full"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1, 5, 10, 20, 30, 40]"
        :page-size="pageSize"
        :layout="layout || `total, sizes, prev, pager, next, jumper`"
        :total="tableData.total"
      ></el-pagination>
      <el-pagination
        v-else-if="small"
        small
        :page-size="pageSize"
        background
        :current-page="current"
        @current-change="handleCurrentChange"
        :layout="layout || `prev, pager, next`"
        :total="tableData.total"
      ></el-pagination>
      <el-pagination
        v-else
        background
        :page-size="pageSize"
        :current-page="current"
        @current-change="handleCurrentChange"
        :layout="layout || `prev, pager, next`"
        :total="tableData.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Expand from "@/components/js/expand";
export default {
  components: {
    Expand,
  },
  data() {
    return {
      current: this.curPage || 1,
    };
  },
  methods: {
    handleOperateClick(row, btn) {
      this.$emit("handleOperateClick", { row: row, btn: btn });
    },
    //表格单选触发
    tableCurrentChange(currentRow, oldCurrentRow) {
      this.$emit("tableCurrentChange", {
        currentRow: currentRow,
        oldCurrentRow: oldCurrentRow,
      });
    },
    //当前页数改变时触发
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    // currentPage 改变时会触发 默认当前页
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
  },
  props: {
    // 表格数据 {data:Array,total:Number}
    tableData: {
      type: Object,
      required: true,
    },
    // 列
    columns: {
      type: Array,
      required: true,
    },
    // 控制是否显示完整的分页功能
    full: {
      type: Boolean,
      default: true,
    },
    // 控制是否显示迷你的分页功能
    small: {
      type: Boolean,
      default: false,
    },
    // 初始化的当前页
    curPage: Number,
    // 分页大小
    pageSize: {
      type: [String, Number],
      default: 10,
    },
    // 分页布局
    layout: {
      type: String,
    },
    selection: {
      type: Boolean,
      default: false,
    },
    formatter: {
      type: Function,
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    curPage(val) {
      this.current = val;
    },
  },
};
</script>

<style scoped>
.pag {
  margin-top: 8px;
  text-align: right;
}
</style>
